<template >
    <div class="newsdetail-container">
        <!-- 标题 -->
        <h2 class="title">{{newsdetail.title}}</h2>
        <!-- 小标题 -->
        <p class="child-title">
            <span>发表时间：{{newsdetail.add_time | dateformat | updata}}</span>
            <span>点击：{{newsdetail.click}}次</span>
        </p>
        <hr/>
        <!-- 内容 -->
        <div class="contain" v-html="newsdetail.content">
        </div>
        <!-- 公共的评论子组件 -->
        <comment :artid="id"></comment>
    </div>
</template>

<script>
import Comment from '../public/comment'
import {Toast} from 'mint-ui'
export default {
    name:'NewDetail',
    data(){
        return{
            id:this.$route.params.id,
            newsdetail:{}
        }
    },
    created(){
        this.getnewsdetail();
    },
    methods:{
        getnewsdetail(){
            this.$http.get('api/getnew/'+this.id).then(result =>{
                // console.log(result.body)
                var data=result.body
                if(data.status===0){
                    this.newsdetail=data.message[0]
                }else{
                    Toast('请求数据失败')
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    },
    components:{
        Comment
    }
}
</script>

<style lang="scss" scoped>
.newsdetail-container{
    padding:0 .08rem;
    padding-bottom: 1rem;
    .title{
        font-size: .32rem;
        text-align: center;
        line-height: .70rem;
        color: red;
    }
    .child-title{
        font-size: .28rem;
        color: #09f;
        display: flex;
        justify-content: space-between;
    }
}
</style>